<template>
  <div>
    <el-dialog title="校友信息" :visible.sync="dialogFormVisible" :loading="loading" width="800px">
      <el-form :model="userInfo">
        <el-form-item label="校友编号" :label-width="formLabelWidth" prop="userId">
          <el-input v-model="userInfo.userId" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友姓名" :label-width="formLabelWidth" prop="userInfo.userName">
          <el-input v-model="userInfo.userName" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友性别" :label-width="formLabelWidth" prop="userInfo.userSex">
          <el-radio-group v-model="userInfo.userSex" :readonly="readonly">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="校友生源地" :label-width="formLabelWidth" prop="userInfo.userOrigin">
          <el-input v-model="userInfo.userOrigin" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友班级" :label-width="formLabelWidth" prop="userInfo.userClassName">
          <el-input v-model="userInfo.userClassName" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友学部" :label-width="formLabelWidth" prop="userInfo.userPartName">
          <el-input v-model="userInfo.userPartName" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="校友年级" :label-width="formLabelWidth" prop="userInfo.userLevel">
          <el-input v-model="userInfo.userLevel" autocomplete="off" :readonly="readonly" />
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="userInfo.userPhone">
          <el-input v-model="userInfo.userPhone" autocomplete="off" :readonly="readonly" type="number" />
        </el-form-item>
        <el-form-item label="电子邮箱" :label-width="formLabelWidth" prop="userInfo.userEmail">
          <el-input v-model="userInfo.userEmail" autocomplete="off" :readonly="readonly" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { showUserInfoById } from '../../api/user.js'
export default {
  name: 'Info',
  components: 'Info',
  props: {
  },
  data() {
    return {
      userInfo: {},
      loading: false,
      dialogFormVisible: false,
      formLabelWidth: '100px',
      title: '查看校友信息',
      readonly: true
    }
  },
  create() {

  },
  watch: {

  },
  methods: {
    // 展示校友信息按钮
    showUserInfo(userId) {
      this.title = '查看校友信息'
      this.readonly = true
      this.fetchData(userId)
    },
    // 根据id获取用户个人信息
    fetchData(userId) {
      this.loading = true
      showUserInfoById(userId).then((data) => {
        this.userInfo = data.obj
        console.log('当前查询用户数据为', this.userInfo)
        this.loading = false
        this.dialogFormVisible = true
      })
    }
  }
}
</script>
